<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin:10px 0;">
        <el-form label-width="80px">
            <el-form-item label="SPU名称">
                123
            </el-form-item>
            <el-form-item label="SKU名称">
                <el-input v-model="skuParams.skuName" placeholder="请输入SKU名称" size="normal" clearable @change="">
                </el-input>
            </el-form-item>
            <el-form-item label="价格(元)">
                <el-input v-model="skuParams.price" placeholder="价格(元)" type="number" size="normal" clearable
                    @change=""></el-input>
            </el-form-item>
            <el-form-item label="重量(千克)">
                <el-input v-model="skuParams.weight" placeholder="重量(千克)" type="number" size="normal" clearable
                    @change=""></el-input>
            </el-form-item>
            <el-form-item label="规格描述">
                <el-input v-model="skuParams.skuDesc" placeholder="规格描述" type="textarea" size="normal" clearable
                    @change=""></el-input>
            </el-form-item>
            <el-form-item label="平台属性">
                <el-form inline>
                    <el-form-item v-for="(attr,index) in attrList" :key="attr.id" :label="attr.attrName">
                        <el-select v-model="attr.attrIdAndValueId" clearable filterable @change="">
                            <el-option v-for="(item,index) in attr.attrValueList" :key="item.id" :label="item.valueName"
                                :value="`${attr.id}:${item.id}`"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="销售属性">
                <el-form inline>
                    <el-form-item v-for="(sale,index) in saleAttrList" :key="sale.id" :label="sale.saleAttrName">
                        <el-select v-model="sale.saleIdAndValueId" placeholder="" clearable filterable @change="">
                            <el-option v-for="(item,index) in sale.spuSaleAttrValueList" :key="item.id"
                                :label="item.saleAttrValueName" :value="`${sale.id}:${item.id}`"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>

            <el-form-item label="图片名称">
                <el-table ref="tableRef" :data="imgList" border stripe>
                    <el-table-column type="selection" width="80" align="center"></el-table-column>
                    <el-table-column label="图片">
                        <template #="{row,$index}">
                            <img :src="row.imgUrl" alt="" style="width: 100px; height:100px;">
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" prop="imgName"></el-table-column>
                    <el-table-column label="操作">
                        <template #="{row,$index}">
                            <el-button v-if="row.isChecked == 1" type="info" size="small" @click="">默认</el-button>
                            <el-button v-else type="primary" size="default" @click="changeChecked(row)">设置默认</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
        </el-form>
        <el-button type="primary" size="default" @click="save">保存</el-button>
        <el-button size="default" @click="cancel">取消</el-button>

    </el-card>

</template>

<script setup lang="ts">
import { reqAttrList, reqSaleAttr, reqImageList, reqAddSku } from '@/api/product/spu/spu'
import { nextTick, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
// 存储平台属性
let attrList = ref()
// 存储已有销售属性
let saleAttrList = ref()
// 存储图片列表
let imgList = ref()
// 存储table实例
let tableRef = ref<any>()
//收集添加SKU参数
let skuParams = ref<any>({
    //父组件传递过来参数
    category3Id: 0, //三级分类的ID
    spuId: 0, //SPU的ID
    tmId: 0, //spu的品牌的ID

    //v-model收集
    skuName: "", //sku的名字
    price: 0, //sku的价格
    weight: "", //sku的重量
    skuDesc: "", //sku的描述

    skuDefaultImg: "", //默认图片地址
    skuAttrValueList: [
        //平台属性
        // {
        //   attrId: 0, //属性的id
        //   valueId: 0, //属性值的ID
        // },
    ],
    skuSaleAttrValueList: [
        //销售属性
        // {
        //   saleAttrId: 0,
        //   saleAttrValueId: 0,
        // },
    ],
});
//发请求 获取数据
const initSku = async (c1Id, c2Id, row) => {
    // 整理参数category3Id  tmId  spuId
    skuParams.value.category3Id = row.category3Id
    skuParams.value.tmId = row.tmId
    skuParams.value.spuId = row.id
    let result = await reqAttrList(c1Id, c2Id, row.category3Id)
    let result1 = await reqSaleAttr(row.id)
    let result2 = await reqImageList(row.id)
    attrList.value = result
    saleAttrList.value = result1
    imgList.value = result2
    if (imgList.value.length == 0) return;
    // 设置第一张图片为默认 isChecked: 1默认  0设置默认
    imgList.value[0].isChecked = 1
    nextTick(() => {
        //    默认第一张选中
        tableRef.value.toggleRowSelection(imgList.value[0], true)
        // 默认显示第一张默认
        skuParams.value.skuDefaultImg = imgList.value[0].imgUrl
    })
    for (let i = 0; i < imgList.value.length; i++) {
        if (i > 0) {
            imgList.value[i].isChecked = 0
        }
    }

}

// 点击设置默认按钮
const changeChecked = (row) => {
    // 遍历每一项为不选中
    imgList.value.forEach(item => {
        item.isChecked = 0
        tableRef.value.toggleRowSelection(item, false)
    });
    // 设置默认
    row.isChecked = 1
    tableRef.value.toggleRowSelection(row, true)
    // 收集图片路径
    skuParams.value.skuDefaultImg = row.imgUrl
}
// 点击保存按钮 发请求
const save = async () => {
    // 整理数据
    // 整理平台属性参数
    skuParams.value.skuAttrValueList = attrList.value.reduce((prev, next) => {
        // 先判断数组对象里面有没有属性attrIdAndValueId
        if (next.attrIdAndValueId) {
            let [attrId, valueId] = next.attrIdAndValueId.split(':')
            prev.push({ attrId, valueId })
        }
        return prev;
    }, []);
    // 整理销售属性参数
    skuParams.value.skuSaleAttrValueList = saleAttrList.value.reduce((prev, next) => {
        // 先判断数组对象里面有没有属性saleIdAndValueId
        if (next.saleIdAndValueId) {
            let [saleAttrId, saleAttrValueId] = next.saleIdAndValueId.split(':')
            prev.push({ saleAttrId, saleAttrValueId })
        }
        return prev
    }, []);
    // 发请求
    try {
        await reqAddSku(skuParams.value)
        ElMessage({
            type:'success',
            message:'添加成功'
        })
        // 切换场景
        emit('changeShow', {
            shows: 0,
            flag: ''
        })
    } catch (error) {
        ElMessage({
            type:'error',
            message:'添加失败'
        })
    }

    // 清空数据
}


// 点击取消按钮
const cancel = () => {
    emit('changeShow', {
        shows: 0,
        flag: ''
    })
}
// 触发自定义事件
let emit = defineEmits(['changeShow'])
// 对外暴露方法
defineExpose({
    initSku
})
</script>

<style scoped>

</style>